<template>
<div class="ranking">
  <div class="ranking_span"><span>销售排名TOP10</span></div>

  <div class="ranking_data"></div>
   <div class="ranking_price"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Bus from '@/utils/EventBus'
export default {
  name: 'rankingIndex',
  data () {
    return {
      nameList: [],
      numberList: []
    }
  },
  created () {
    Bus.$on('ranking', (rankingdata) => {
      this.nameList = rankingdata.nameList.split(',')
      this.numberList = rankingdata.numberList.split(',')
      this.ranking()
    })
  },
  mounted () {

  },
  methods: {
    ranking () {
      const chartDom = document.querySelector('.ranking_data')
      const myChart = echarts.init(chartDom)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
      const

        option = {
          title: {
            /*  text: 'World Population' */
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},

          grid: {

            left: '25%',
            right: '1%',
            bottom: '-2%' // 调整底部柱子之间的距离

            // containLabel: true

          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false // 显示x轴线
              /* lineStyle: {
                color: '#333'
              } */
            },
            splitLine: {
              show: false // 去掉纵向分隔线
            },
            axisLabel: {
              show: false // 不显示坐标轴标签
            }

          },
          yAxis: {
            type: 'category',
            data: this.nameList,
            // max: 100, // 最高
            position: 'left', // 将 Y 轴定位到左侧
            // 可以通过调整 `offset` 属性来控制 Y 轴的偏移量
            offset: 20, // 偏移量，可以根据需要调整
            // 升序
            inverse: true,
            splitLine: { show: false },
            axisLine: {
              show: false // 显示y轴线
              /* lineStyle: {
                color: '#333'
              } */
            },
            axisTick: {
              show: false // 关闭短横线
            }
            // symbol: 'none' // 去掉箭头
          },
          series: [
            {
              /* name: '2024', */

              realtimeSort: true, // 排序
              type: 'bar',
              data: this.numberList,

              // 修改条形图的宽度
              barWidth: '70%',

              itemStyle: {
              // 修改条形图的颜色
                color: 'orange',
                borderRadius: [0, 10, 10, 0] // 分别对应左上、右上、右下、左下的圆角半径

              },

              label: {
                show: true, // 显示标签
                position: 'insideLeft', // 标签位置
                // 可以通过 formatter 函数自定义标签内容
                formatter: '{c}' // {c} 表示数据值
              }
            }

          ]
        }

      option && myChart.setOption(option)
    }
  }

}
</script>

<style lang="less" scoped>
.ranking{
   margin-top: 20px;
  background-color: white;

 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

}
.ranking_data{
  width: 580px;
  height: 500px;
}
.ranking_span{
  padding-top: 20px;
  span{
    padding-left: 20px;
    font-size: 20px;
    font-weight:600;
       }
}
.ranking_price{
   padding-left: 250px;
   margin-top:30px;
   padding-bottom:49px;
}

</style>
